// 个人中心首页：
<template>
  <div class="profile">
    <!-- 上半部分： -->
    <div class="topheader">
      <!-- 动态class里面：用户有头像的情况，src前面应当有冒号 -->
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt=""
        class="userpic"
      />
      <img v-else src="../../assets/3.jpg" alt="" class="userpic" />
      <div class="info">
        <div class="author">
          <span
            :class="{
              iconxingbienan: userInfo.gender === 1,
              iconxingbienv: userInfo.gender === 0,
            }"
            class="iconfont"
          ></span>
          {{ userInfo.nickname || userInfo.username }}
        </div>
        <div class="date">2019-10-10</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <!-- 下半部分： -->
    <!-- 添加横条组件： -->
    <ProfileBar title="我的关注" specific="关注的用户呀~~" />
    <ProfileBar title="我的跟帖" specific="跟帖 / 回复" />
    <ProfileBar title="我的收藏" specific="文章 / 视频" />
    <ProfileBar title="设置" />
    <ProfileBar title="退出" @click.native="toLogin()" />
  </div>
</template>

<script>
// 引入横条组件：
import ProfileBar from "../../components/ProfileBar";
export default {
  components: {
    ProfileBar,
  },
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.$axios({
      // data: {
      //   id: this.userInfo.id,
      // }, 错误！！！
      // url: "http://157.122.54.189:9083/user/" + this.userInfo.id, 获取id错误！！
      url: "/user/" + localStorage.getItem("userId"),
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    }).then((res) => {
      console.log(res.data);
      const { data, message } = res.data;
      if (message === "获取成功") {
        this.userInfo = data;
      }
      // else {
      //   // 知道信息是错的，就需要删除信息：
      //   localStorage.removeItem("token");
      //   localStorage.removeItem("userId");
      //   this.$router.replace("/login");
      //   this.$toast(message);
      // }
    });
  },
  methods: {
    toLogin() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$toast("退出成功！");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.topheader {
  display: flex;
  align-items: center;
  padding: 20 / 360 * 100vw;
  border-bottom: 5px solid #ccc;
  .userpic {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
  .info {
    flex-grow: 1;
    margin-left: 10 / 360 * 100vw;
    font-size: 18 / 360 * 100vw;
    .author {
      color: #585858;
      .iconxingbienan {
        color: #91c6ef;
        font-size: 18 / 360 * 100vw;
      }
      .iconxingbienv {
        color: hotpink;
      }
    }
    .date {
      font-size: 13 / 360 * 100vw;
      color: #a8a8a8;
    }
  }
  .iconjiantou1 {
    font-size: 18 / 360 * 100vw;
    color: #ccc;
    font-weight: 700;
  }
}
</style>